<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <style>
        #app{

            width: 200px;
            height: 200px;

        }
    </style>
</head>
<body>
    <div id="app">

    </div>
    <script>
        //ajax简单的理解就是向后台请求数据的一种技术
        // 1.读取网络数据
         $.ajax({
            url:"http://localhost:3000/top/playlist?cat=华语&limit=3",
            type:"get",
            dataType:"json",
        
            //2.在数据请求成功后，渲染ui
            success : res=>{
                let data = res.playlists;
                for(let i=0;i<data.length;i++){
                    //频繁的操作DOM，创建DOM，不利渲染操作DOM非常消耗性能
                    let ele = `<div>
                        <img src="${data[i]["coverImgUrl"]}"/>
                        <h4>${data[i]["name"]}</h4>
                        </div>`
                        $("#app").append(ele);
                }            
            }
        
    })
    </script>
  
</body>
</html>